<template>
  <div :class="['list-item', { checked: item.checked }]" @click="check">
    <div>{{ item.name }}</div>
    <button @click.stop="remove">x</button>
  </div>
</template>

<script>
export default {
  name: "ListItem",
  props: ["item"],
  methods: {
    check() {
      this.$emit("check", this.item.key);
    },
    remove() {
      this.$emit("remove", this.item.key);
    },
  },
};
</script>

<style>
</style>